<script setup lang="ts">

</script>

<template>
    <div class="home-layout">

        <t-layout class="containers">

            <!-- 页面头部 -->
            <t-header>
                <!-- 顶部导航组件-->
                <layout-components-header></layout-components-header>
            </t-header>

            <!-- 页面内容 -->
            <t-content>
                <!-- 页面主体 -->
                <div class="main-box w-[960px] my-[30px] mx-auto">
                    <t-row :gutter="15">
                        <!-- 左侧主体 -->
                        <t-col :span="9">
                            <slot name="left" />
                        </t-col>
                        <t-col :span="3">
                            <slot name="right" />
                        </t-col>
                    </t-row>
                </div>
            </t-content>

            <!-- 页面底部 -->
            <t-footer>
                <layout-components-footer></layout-components-footer>
            </t-footer>

        </t-layout>
        
    </div>
</template>

<style scoped>
/** 顶部导航css */
:deep() {
    .content-item {
        margin-top: 30px !important;
    }

    .t-list-item {
        padding: 5px !important;
    }

    .t-list__header {
        padding-left: 5px !important;
    }
}
</style>